<template>
  <view class="item-scroll">
    <view v-for="(item, index) in tabBars"
      :key="index"
      class="item-scroll-item"
      :class="tabIndex === index? 'item-selected': ''"
      @click="changeTab(index)">
      <text class="item-name" :class="tabIndex === index? 'name-selected': ''">{{item.name}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 0
      }
    },
    props: {
      tabBars: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      changeTab(index) {
        this.tabIndex = index;
        this.$emit('clickItem', index);
      }
    }
  }
</script>

<style scoped>
  .item-scroll {
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: #999;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: space-around;
    flex-direction: row;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f5f5f5;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #f5f5f5;
    background: #fff;
  }
  .item-scroll-item {
    height: 92rpx;
    line-height: 92rpx;
		/* #ifndef APP-NVUE */
    display: flex;
		/* #endif */
    justify-content: center;
    align-items: center;
    margin-right: 32rpx;
  }
  .item-scroll-item .item-name {
    font-size: 28rpx;
  }
  .item-scroll-item:last-child {
    margin-right: 0rpx;
  }
  .name-selected {
    color: #333;
    font-weight: bold;
  }
  .item-selected {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: #DC2115;
  }
</style>